<script setup lang="ts">
import NavigationBar from '@/components/NavigationBar.vue'
import useStatusBarHeight from '@/composables/statusBarHeight'
import { useProjectConfigStore } from '@/store/projectConfig'
import { fetchCasesAPI } from '@/apis/fetchCases'

// Assets
import modalSuccessIcon from '@/static/images/modal/success.png'
import modalFormIcon from '@/static/images/modal/form.png'
import aboutUsIcon0 from '@/static/images/home/about-us-0.png'
import aboutUsIcon1 from '@/static/images/home/about-us-1.png'
import aboutUsIcon2 from '@/static/images/home/about-us-2.png'
import aboutUsIcon3 from '@/static/images/home/about-us-3.png'
import aboutUsIcon4 from '@/static/images/home/about-us-4.png'
import aboutUsIcon5 from '@/static/images/home/about-us-5.png'
import { fetchHomePhoneNumberAPI } from '@/apis/fetchHomePhoneNumber'

const router = useRouter()
const statusBarHeight = useStatusBarHeight()

const topPadding = computed(() => statusBarHeight.value + uni.upx2px(88) + uni.upx2px(200))

// 是否显示状态栏背景
const isShowNavBg = ref(false)
// 监听页面滚动，更新状态栏背景可见性
onPageScroll((e) => {
  const toggle = useThrottleFn(() => isShowNavBg.value = e.scrollTop > 16, 100)
  toggle()
})
// 将状态栏背景可见性提供给状态栏组件
provide(isShowNavigationBarBackgroundKey, isShowNavBg)

/* -------------------------------- 搜索 START -------------------------------- */
const searchText = ref('')

function handleChangeSearch(e: Event) {
  searchText.value = (e.target as HTMLInputElement).value
}

function handleConfirmChange() {
  router.push({
    name: 'search',
    params: {
      search_text: searchText.value,
    },
  })
}
/* --------------------------------- 搜索 END --------------------------------- */

/* ----------------------------- 获取报价表单卡片 START ----------------------------- */
// 是否展示提交成功的弹窗
const isShowSuccessModal = ref(false)

/**
 * @description - 切换提交成功的弹窗的可见性
 */
const toggleSuccessModal = useThrottleFn(() => {
  isShowSuccessModal.value = !isShowSuccessModal.value
}, 1000)

/**
 * @description - 处理表单提交成功
 */
function handleFormSuccess() {
  toggleSuccessModal()
}
/* ------------------------------ 获取报价表单卡片 END ------------------------------ */

function handleTapMyProjects() {
  router.push('projectList')
}

/* ----------------------------- 户型规划弹窗表单 START ----------------------------- */
// 是否显示户型规划弹窗
const isShowGuideModal = ref(false)

/**
 * @description - 控制户型规划弹窗的可见性
 */
const toggleGuideModal = useThrottleFn(() => {
  isShowGuideModal.value = !isShowGuideModal.value
}, 1000)

/**
 * @description - 处理户型规划弹窗表单提交成功
 */
function handleGuideModalSuccess() {
  toggleGuideModal()
  toggleSuccessModal()
}
/* ------------------------------ 户型规划弹窗表单 END ------------------------------ */

/* ------------------------------ 设计案例 START ------------------------------ */
const projectConfigStore = useProjectConfigStore()

function handleViewMoreCase() {
  router.pushTab('cases')
}

const selectedTabIndex = ref(0)

function handleSelectTab(index: number) {
  selectedTabIndex.value = index
  loadCases(selectedTabIndex.value)
}

const cases = ref<Case[]>([])

onMounted(() => {
  loadCases(0)
})

async function loadCases(index: number) {
  if (projectConfigStore.caseTypeList.length > 0) {
    const selectedCaseType = projectConfigStore.caseTypeList[index]
    const res = await fetchCasesAPI({
      type_id: selectedCaseType.id,
      recommend: '1',
      limit: '4',
    })
    if (res.data?.code === 1)
      cases.value = res.data.data.data
    else
      uni.showToast({ title: res.data?.msg, icon: 'none' })
  }
  else {
    uni.showToast({ title: '案例获取失败，请重试', icon: 'none' })
  }
}

function handleTapCaseItem(caseItem: Case) {
  if (caseItem.id) {
    router.push({
      name: 'caseDetail',
      params: {
        case_id: caseItem.id?.toString(),
      },
    })
  }
}

const floatButtonPhoneNumber = ref('')

onMounted(async () => {
  const res = await fetchHomePhoneNumberAPI()
  floatButtonPhoneNumber.value = (res.data as any).data.index_mobile as string
})

function handleTapSusButton() {
  if (floatButtonPhoneNumber.value) {
    uni.makePhoneCall({
      phoneNumber: floatButtonPhoneNumber.value,
      fail: () => { uni.showToast({ title: '呼叫取消', icon: 'none' }) },
    })
  }
}
/* ------------------------------- 设计案例 END ------------------------------- */
</script>

<template>
  <view class="relative min-h-screen bg-#F8F8F8">
    <!-- 页面背景图 -->
    <image class="z-0 absolute top-0 left-0 w-750rpx" src="@/static/images/home/home_bg.png" />
    <!-- 自定义导航栏 -->
    <NavigationBar title="佳宅通" title-placement="leading" front-color="#ffffff" :is-show-back-button="false" />
    <view class="relative z-10 mx-30rpx">
      <!-- Top Padding -->
      <Spacer :height="topPadding.toString()" unit="px" />
      <!-- Hero 卡片 START -->
      <view class="flex flex-col p-30rpx bg-white rounded-20rpx">
        <SearchBar @change="handleChangeSearch" @confirm="handleConfirmChange" />
        <Spacer height="40" />
        <!-- 选项组 START -->
        <view class="flex justify-between items-center mx-28rpx">
          <!-- 装修报价 选项 -->
          <view class="flex flex-col items-center" @tap="router.push('getPrice')">
            <image class="w-111rpx h-111rpx" src="@/static/images/home/price.png" />
            <Spacer height="24" />
            <view class="text-30rpx leading-30rpx text-black font-bold">
              装修报价
            </view>
          </view>
          <!-- 户型规划 选项 -->
          <view class="flex flex-col items-center" @tap="toggleGuideModal">
            <image class="w-111rpx h-111rpx" src="@/static/images/home/guide.png" />
            <Spacer height="24" />
            <view class="text-30rpx leading-30rpx text-black font-bold">
              户型规划
            </view>
          </view>
          <!-- 我的项目 选项 -->
          <view class="flex flex-col items-center" @tap="handleTapMyProjects">
            <image class="w-111rpx h-111rpx" src="@/static/images/home/project.png" />
            <Spacer height="24" />
            <view class="text-30rpx leading-30rpx text-black font-bold">
              我的项目
            </view>
          </view>
        </view>
        <!-- 选项组 END -->
      </view>
      <!-- Hero 卡片 END -->
      <Spacer height="30" />
      <!-- 获取报价卡片 START -->
      <view class="p-30rpx bg-#FFFFFF rounded-20rpx">
        <!-- 标题 -->
        <view class="text-30rpx leading-30rpx font-bold text-black">
          获取家装报价
        </view>
        <Spacer height="12" />
        <!-- 副标题 -->
        <view class="flex items-center text-26rpx leading-26rpx  text-tertiary">
          <image class="w-39rpx h-39rpx" src="@/static/images/home/horn.png" />
          <Spacer width="8" />
          现已累计有99288位客户成功获取
        </view>
        <Spacer height="30" />
        <!-- 表单 -->
        <UserSubmitForm :is-show-name-field="false" @success="handleFormSuccess" />
        <Spacer height="50" />
        <!-- 底部提示 -->
        <view class="text-24rpx leading-24rpx text-tertiary text-center">
          <text class="text-#FF1313">
            *
          </text>
          将有工作人员与您联系，提供专属服务
        </view>
      </view>
      <!-- 获取报价卡片 END -->
      <Spacer height="30" />
      <!-- 上传户型卡片 START -->
      <view class="relative flex flex-col w-690rpx h-200rpx">
        <image class="absolute top-0 left-0 w-690rpx h-200rpx" src="@/static/images/home/apa-layout.png" />
        <Spacer height="50" />
        <view class="relative text-32rpx leading-32rpx text-white font-bold text-center">
          上传户型图“免费”送平面规划方案
        </view>
        <Spacer height="20" />
        <view class="relative inline-block px-17rpx py-12rpx mx-auto text-28rpx leading-28rpx text-white bg-brand rounded-25rpx" @tap="toggleGuideModal">
          立即上传
        </view>
      </view>
      <!-- 上传户型卡片 END -->
      <Spacer height="50" />
      <!-- 设计案例 START -->
      <view class="flex justify-between items-center">
        <view class="text-30rpx leading-30rpx text-primary font-bold">
          设计案例
        </view>
        <view class="text-26rpx leading-26rpx text-tertiary" @tap="handleViewMoreCase">
          查看更多>
        </view>
      </view>
      <Spacer height="24" />
      <DesignCaseTabs :selected-index="selectedTabIndex" @select="handleSelectTab" />
      <Spacer height="24" />
      <CaseItemCard
        v-for="item in cases"
        :key="item.id"
        :picture="item.image"
        :title="item.name"
        :subtitle="item.introduction"
        @tap="() => handleTapCaseItem(item)"
      />
      <!-- 设计案例 END -->
      <!-- 报名卡片 START -->
      <view class="relative w-690rpx h-200rpx" @tap="toggleGuideModal">
        <image class="absolute top-0 left-0 w-690rpx h-200rpx" src="@/static/images/home/register.png" />
      </view>
      <!-- 报名卡片 END -->
      <Spacer height="30" />
      <!-- 服务流程卡片 START -->
      <view class="p-30rpx bg-white rounded-20rpx">
        <view class="text-30rpx leading-30rpx font-bold text-primary">
          服务流程
        </view>
        <Spacer height="28" />
        <image class="w-637rpx h-303rpx" src="@/static/images/home/service-process.png" />
      </view>
      <!-- 服务流程卡片 END -->
      <Spacer height="30" />
      <!-- 关于我们卡片 START -->
      <view class="flex flex-col bg-white p-20rpx pb-30rpx rounded-20rpx">
        <view class="mt-10rpx mx-10rpx text-30rpx leading-30rpx font-bold text-primary">
          关于我们
        </view>
        <Spacer height="28" />
        <view class="grid grid-cols-3 justify-between">
          <AboutUsItem :index="0" :icon="aboutUsIcon0" title="5年" subtitle="工程整体保修" :has-margin="true" />
          <AboutUsItem :index="1" :icon="aboutUsIcon1" title="2小时" subtitle="客户服务相应" :has-margin="true" />
          <AboutUsItem :index="2" :icon="aboutUsIcon2" title="终身" subtitle="防渗漏工程保修" :has-margin="true" />
          <AboutUsItem :index="3" :icon="aboutUsIcon3" title="5年" subtitle="设备产品保修" :has-margin="false" />
          <AboutUsItem :index="4" :icon="aboutUsIcon4" title="零增项" subtitle="拒绝恶意增项" :has-margin="false" />
          <AboutUsItem :index="5" :icon="aboutUsIcon5" title="项目监管" subtitle="实时了解项目进度" :has-margin="false" />
        </view>
      </view>
      <!-- 关于我们卡片 END -->
      <Spacer height="90" />
    </view>
    <!-- 浮动按钮 -->
    <image
      class="z-100 fixed right-0 bottom-4rpx w-134rpx h-142rpx"
      src="@/static/images/home/suspension.png"
      @tap="handleTapSusButton"
    />
  </view>
  <uv-overlay :show="isShowGuideModal">
    <uv-transition mode="zoom-in" :show="isShowGuideModal">
      <view class="relative w-screen h-screen">
        <JZTModal :icon="modalFormIcon" @confirm="toggleSuccessModal">
          <image class="absolute top-40rpx right-40rpx w-46rpx h-46rpx" src="@/static/images/modal/xmark-circle.png" @tap="toggleGuideModal" />
          <Spacer height="146" />
          <view class="text-34rpx leading-34rpx font-bold text-primary text-center">
            户型规划
          </view>
          <Spacer height="30" />
          <view class="px-30rpx">
            <UserSubmitForm type="2" @success="handleGuideModalSuccess" />
          </view>
          <Spacer height="32" />
          <view class="text-24rpx leading-24rpx text-tertiary text-center">
            <text class="text-#FF1313">
              *
            </text>
            将有工作人员与您联系，安排设计师
          </view>
          <Spacer height="36" />
        </JZTModal>
      </view>
    </uv-transition>
  </uv-overlay>
  <uv-overlay :show="isShowSuccessModal" @tap="toggleSuccessModal">
    <uv-transition mode="zoom-in" :show="isShowSuccessModal">
      <view class="relative w-screen h-screen">
        <JZTModal
          v-if="isShowSuccessModal"
          :icon="modalSuccessIcon"
          title="表单提交成功"
          content="恭喜信息提交成功，请耐心等待专属顾问与您联系～"
          @confirm="toggleSuccessModal"
        />
      </view>
    </uv-transition>
  </uv-overlay>
</template>

<route lang="yaml">
name: 'userHome'
style:
  navigationStyle: 'custom'
layout: 'custom'
</route>
